<template>
  <div class="historical-comparison">
    <div class="section-header">
      <h3>历史数据对比</h3>
    </div>
    
    <div class="comparison-content">
      <!-- 时间选择器 -->
      <div class="time-selector">
        <button 
          class="time-btn active"
          @click="selectTimeRange('today')"
        >
          今日
        </button>
        <button 
          class="time-btn"
          @click="selectTimeRange('yesterday')"
        >
          昨日
        </button>
        <button 
          class="time-btn"
          @click="selectTimeRange('lastWeek')"
        >
          上周同日
        </button>
      </div>
      
      <!-- 热图对比 -->
      <div class="heatmap-comparison">
        <div class="heatmap-section">
          <div class="heatmap-label">当前热图</div>
          <div class="heatmap-container current">
            <div class="heatmap-gradient current-gradient"></div>
          </div>
        </div>
        
        <div class="heatmap-section">
          <div class="heatmap-label">历史热图</div>
          <div class="heatmap-container historical">
            <div class="heatmap-gradient historical-gradient"></div>
          </div>
        </div>
      </div>
      
      <!-- 变化分析 -->
      <div class="change-analysis">
        <div class="analysis-item">
          <div class="analysis-label">最大变化区域</div>
          <div class="analysis-value">{{ comparisonData.maxChangeArea }}</div>
        </div>
        
        <div class="analysis-item">
          <div class="analysis-label">平均压力变化率</div>
          <div class="analysis-value change-rate">{{ comparisonData.avgChangeRate }}</div>
        </div>
        
        <div class="growth-areas">
          <div class="growth-label">异常增长区域</div>
          <div class="growth-list">
            <div 
              v-for="(area, index) in comparisonData.abnormalGrowthAreas" 
              :key="index"
              class="growth-item"
            >
              <span class="area-name">{{ area.area }}:</span>
              <span class="pressure-from">{{ area.from }}</span>
              <span class="arrow">→</span>
              <span class="pressure-to">{{ area.to }}</span>
              <span class="change-percent">{{ area.change }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistoricalComparison',
  props: {
    comparisonData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedTimeRange: 'today'
    }
  },
  methods: {
    selectTimeRange(range) {
      this.selectedTimeRange = range
      this.$emit('time-range-change', range)
    }
  }
}
</script>

<style scoped>
.historical-comparison {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin: 0;
  line-height: 24px;
}

.comparison-content {
  display: flex;
  gap: 24px;
}

/* 时间选择器 */
.time-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid #E5E7EB;
  padding-right: 17px;
  min-width: 124px;
}

.time-btn {
  background: #F3F4F6;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.time-btn.active {
  background: #1677FF;
  color: #FFFFFF;
}

.time-btn:hover:not(.active) {
  background: #E5E7EB;
}

/* 热图对比 */
.heatmap-comparison {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.heatmap-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.heatmap-label {
  color: #6B7280;
  font-size: 14px;
  line-height: 20px;
}

.heatmap-container {
  background: #F8F8F8;
  border-radius: 6px;
  height: 180px;
  overflow: hidden;
  position: relative;
}

.heatmap-gradient {
  width: 100%;
  height: 100%;
}

.current-gradient {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 77, 79, 0.70) 0%, rgba(250, 173, 20, 0.50) 30%, rgba(22, 119, 255, 0.30) 70%, rgba(248, 248, 248, 0.00) 90%, rgba(0, 0, 0, 0.00) 90%);
}

.historical-gradient {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 77, 79, 0.50) 0%, rgba(250, 173, 20, 0.40) 40%, rgba(22, 119, 255, 0.30) 70%, rgba(248, 248, 248, 0.00) 90%, rgba(0, 0, 0, 0.00) 90%);
}

/* 变化分析 */
.change-analysis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid #E5E7EB;
  padding-left: 17px;
  min-width: 272px;
}

.analysis-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.analysis-label {
  color: #6B7280;
  font-size: 14px;
  line-height: 20px;
}

.analysis-value {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.change-rate {
  color: #FF4D4F;
}

.growth-areas {
  margin-top: 8px;
}

.growth-label {
  color: #6B7280;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}

.growth-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.growth-item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
}

.area-name {
  color: #000000;
  width: 61px;
}

.pressure-from,
.pressure-to {
  color: #000000;
  width: 38px;
}

.arrow {
  color: #000000;
  text-align: center;
  width: 12px;
}

.change-percent {
  color: #FF4D4F;
  width: 32px;
  margin-left: 7px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .comparison-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .time-selector {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #E5E7EB;
    padding-right: 0;
    padding-bottom: 16px;
    min-width: auto;
  }
  
  .heatmap-comparison {
    flex-direction: row;
    gap: 24px;
  }
  
  .change-analysis {
    border-left: none;
    border-top: 1px solid #E5E7EB;
    padding-left: 0;
    padding-top: 16px;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .historical-comparison {
    padding: 16px;
  }
  
  .heatmap-comparison {
    flex-direction: column;
    gap: 16px;
  }
  
  .heatmap-container {
    height: 120px;
  }
  
  .time-selector {
    flex-direction: column;
    gap: 8px;
  }
  
  .growth-item {
    flex-wrap: wrap;
    gap: 4px;
  }
}
</style>
